<template>
  <table>
    <!-- th里面自定义一个标题数组 -->
    <th v-for="item in tabTitle" :key="item">{{ item }}</th>
    <tr v-for="item in tabContent" :key="item">
      <td v-for="(i,index) in tabContent" :key="i.id">{{Object.values(tabContent[index])[index]}}</td>
      <td>
        <slot name="change" :item="item"></slot>
        <slot name="delete"></slot>
      </td>
    </tr>
  </table>
</template>
<script lang="ts" setup>
defineProps({
  tabTitle:{
    type:Array,
    default:["Date","Name","Address","Tag","11"],
  },
  tabContent:{
    type:Array,
    default:[{data:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],
  }
})
</script>
<style lang="scss" scoped>
table{
  width: 100%;
}
</style>